<script lang="ts" setup>
import http from '@/http';
import { Delete, CirclePlus, EditPen } from '@element-plus/icons-vue'
import type { TableInstance } from 'element-plus'
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { ElTree } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { tr } from 'element-plus/es/locale';
import { reactive } from 'vue'


//角色名的搜索框的值
const deptName = ref('')

//表格元素的引用
const multipleTableRef = ref<TableInstance>()
//表格中选中的角色
const multipleSelection = ref([])

//全选/全不选切换
const toggleSelection = (rows, ignoreSelectable?: boolean) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(
        row,
        undefined,
        ignoreSelectable
      )
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}

//复选框发生改变
const handleSelectionChange = (val) => {
  console.log(val)
  multipleSelection.value = val
}

//表格角色的数据
const tableData = ref([])
//挂载完成，获取当前页相关的角色数据
onMounted(() => {
  //调用获取当前页相关角色数据的方法
  getPage()
})

//当前页
let pageNum = ref(1)
//每页条数
let pageSize = ref(4)
//总条数
let total = ref(0)
//获取当前页相关角色数据的方法
function getPage() {
  //参数：当前页号 , 每页条数 , 搜索角色名
  http.get('/department/getdepartements', {
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      deptName: deptName.value
    }
  }).then((res) => {
    console.log('hh' + res)
    tableData.value = res.list
    total.value = res.total
    deptName.value = ''
  })
}

//表格科室的数据
const form2 = ref([])
//控制添加科室对话框的显示
const dialogupdateDeptFormVisible = ref(false)
//修改科室按钮,进行编辑科室
const handleEdit = (index: number, row) => {
  http.get('/department/selectDeptId?deptId=' + row.deptId)
    .then((res) => {
      console.log(res);
      form2.value = res;
    })
    dialogupdateDeptFormVisible.value = true
}
function updateDept() {
  http.post('department/updateDept', form2.value)
    .then((res) => {
      //如果修改成功
      if (res == 1) {
        //弹出修改成功提示框
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
        //添加对话框隐藏
        dialogupdateDeptFormVisible.value = false
        //重新当前页的数据
        getPage()
      } else {
        ElMessage({
          message: '修改失败',
          type: 'error',
        })
      }
    })
}

//删除用户按钮,进行用户删除
const handleDelete = (index: number, row) => {
  console.log(index, row)
  http.get('department/deleteDept?deptId=' + row.deptId)
    .then((res) => {
      //如果删除成功
      if (res == 1) {
        //弹出删除成功提示框
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
        //重新当前页的数据
        getPage()
      } else {
        ElMessage({
          message: '删除失败',
          type: 'error',
        })
      }
    })
}



//当前页发生改变
const handleCurrentChange = (val: number) => {
  pageNum.value = val
  //获取当前页的数据
  getPage()
}
//搜索框发生改变
function selectRole() {
  getPage()
}

//给角色授予权限菜单
//控制授权对话框的显示
const centerDialogVisible = ref(false)
//分配权限的角色编号
const rid = ref('')
//默认属性设置
const defaultProps = {
  children: 'childMenuList',
  label: 'menuName',
}
//菜单数据
const menuData = ref([])
//选中的菜单编号
const mids = ref([])
//点击分配权限按钮
const grantMenu = async (index, role) => {
  //清空所有的选中菜单
  mids.value = []
  console.log(role)
  //获取角色编号
  rid.value = role.roleId
  //获取所有权限菜单
  await http.get('/menu/getMenus').then((res) => {
    console.log(res)
    menuData.value = res
  })
  //根据角色编号获取角色拥有的菜单编号
  await http.get('/role/getRoleMenus?rid=' + rid.value).then((res) => {
    mids.value = res
  })
  //授权对话框显示
  centerDialogVisible.value = true
}

//树状控件引用
const treeRef = ref<InstanceType<typeof ElTree>>()
//定义树状节点
interface Tree {
  id: number
  label: string
  children?: Tree[]
}
//添加角色的权限菜单
const formLabelWidth = '140px'

const form = ref({
  deptName: '',
  deptNumber: '',
  deptLeader: '',
  leaderPhone: '',
  status: "",
  currentNumber:""
})
const dialogFormVisible = ref(false)
function add() {
  dialogFormVisible.value = true

}
function addDepartment() {
  http.post('/department/addDepartment',form.value)
    .then((res) => {
      //弹出成功提示
      ElMessage({
        message: '授权成功',
        type: 'success',
      })
      //关闭授权的对话框
      dialogFormVisible.value = false
    })
}

</script>

<template>
  <!-- 按钮+搜索 -->
  <el-row>
    <el-col :span="18">
      <el-button type="primary" :icon="CirclePlus" @click="add">新增</el-button>
      <el-button type="danger" :icon="Delete">批量删除</el-button>
    </el-col>
    <el-col :span="6">
      <el-input v-model="deptName" @change="selectRole" style="width: 240px" placeholder="请输入科室名" clearable />
    </el-col>
  </el-row>

  <!-- 角色表格 -->
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <!-- 普通列 -->
    <el-table-column label="科室ID" width="120" property="deptId" />
    <el-table-column property="deptName" label="科室名称" />
    <el-table-column property="deptNumber" label="科室编码" />
    <el-table-column property="orderNum" label="当前挂号量" />
    <el-table-column property="deptLeader" label="负责人" />
    <el-table-column property="leaderPhone" label="电话" />
    <el-table-column label="状态">
      <template #default="scope">
        <span v-if="scope.row.status == 0">正常</span>
        <span v-else>禁用</span>
      </template>
    </el-table-column>
    <el-table-column property="createTime" label="创建时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">
          修改
        </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-row justify="center">
    <el-col :span="12" :offset="6">
      <el-pagination background layout="prev, pager,next,total" :total="total" :page-size="pageSize"
        v-model:current-page="pageNum" @current-change="handleCurrentChange" />
    </el-col>
  </el-row>

  <!-- 添加科室的对话框 -->
  <el-dialog v-model="dialogFormVisible" title="添加科室信息" width="500">
    <el-form :model="form">
      <el-form-item label="科室名称" :label-width="formLabelWidth">
        <el-input v-model="form.deptName" placeholder="请输入科室名称" autocomplete="off" />
      </el-form-item>
      <el-form-item label="科室编码" :label-width="formLabelWidth">
        <el-input v-model="form.deptNumber" placeholder="请输入科室编码" autocomplete="off" />
      </el-form-item>
      <el-form-item label="负责人" :label-width="formLabelWidth">
        <el-input v-model="form.deptLeader" placeholder="请输入负责人" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth">
        <el-input v-model="form.leaderPhone" placeholder="请输入负责人电话" autocomplete="off" />
      </el-form-item>
      <el-form-item label="排序码" :label-width="formLabelWidth">
        <el-input-number :min="1" :max="100" @change="handleChange" v-model="form.currentNumber"/>
      </el-form-item>


      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-radio-group v-model="form.status">
          <el-radio value="0">正常</el-radio>
          <el-radio value="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addDepartment">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>


  <!-- 修改科室对话框 -->
  <el-dialog v-model="dialogupdateDeptFormVisible" title="修改科室信息" width="500">
    <el-form :model="form2" :data="form">
      <el-form-item label="科室名称" :label-width="formLabelWidth">
        <el-input v-model="form2.deptName" placeholder="请输入科室名称" autocomplete="off" />
      </el-form-item>
      <el-form-item label="科室编码" :label-width="formLabelWidth">
        <el-input v-model="form2.deptNumber" placeholder="请输入科室编码" autocomplete="off" />
      </el-form-item>
      <el-form-item label="负责人" :label-width="formLabelWidth">
        <el-input v-model="form2.deptLeader" placeholder="请输入负责人" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth">
        <el-input v-model="form2.leaderPhone" placeholder="请输入负责人电话" autocomplete="off" />
      </el-form-item>
      <el-form-item label="排序码" :label-width="formLabelWidth">
        <el-input-number :min="1" :max="100" @change="handleChange" v-model="form2.orderNum"/>
      </el-form-item>


      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-radio-group v-model="form2.status">
          <el-radio value="0">正常</el-radio>
          <el-radio value="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogupdateDeptFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateDept">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>


<style scoped></style>
